<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Pikachu Adventure Game</title>
	
	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
	
	<script src="assets/preloadjs-NEXT.min.js"></script>
	
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

	<script>
	
	var messageField;
	var live;
	var ctx;
	var alive;
	
	var spriteList;
	var stage;
    var canvas;
	var pikachu;
	var loader;
	var bg;
	var enermy;
	var bolt;
	var blood;
	var explode;

	var KEYCODE_ENTER = 13;
	var KEYCODE_UP = 38;		
	var KEYCODE_LEFT = 37;		
	var KEYCODE_RIGHT = 39;		
	var KEYCODE_DOWN = 40;

	var lfHeld;				
	var rtHeld;				
	var upHeld;			
	var dnHeld;
	
	document.onkeydown = handleKeyDown;
	document.onkeyup = handleKeyUp;
	
	function init() {
		
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		ctx = canvas.getContext("2d");
		
		messageField = new createjs.Text("Loading", "bold 24px Arial", "#FFFFFF");
		messageField.maxWidth = 1000;
		messageField.textAlign = "center";
		messageField.x = canvas.width / 2;
		messageField.y = canvas.height / 2;
		
		manifest = [
			{src:"img/background.png", id:"bg"},
			{src:"img/bloody.png", id:"blood"},
			{src:"img/bolting.png", id:"bolt"},
			{src:"img/Untitled-3.png", id:"enermy"},
			{src:"img/boom.png", id:"boom"},
			{src:"img/pika.png", id:"pikachu"}
		];

		loader = new createjs.LoadQueue(false);
		loader.addEventListener("complete", handleComplete);
		loader.loadManifest(manifest);
		
		}
		
		
	function handleComplete(){
		
		document.getElementById("loader").className = "";

	//////////////////////////////////////////////////////////////////////////////////////////////	
		
		bg = new createjs.Bitmap(loader.getResult("bg")); 
		
	///////////////////////////////////////////////////////////////////////////////////////////////	
		
		var spritesheet = new createjs.SpriteSheet({
			"framerate":24,
			"images":[loader.getResult("pikachu")],
			"frames":[
			[0, 0, 128, 64, 0, -3, 0],
			[128, 0, 128, 64, 0, -3, 0],
			[256, 0, 128, 64, 0, -3, 0],
			[384, 0, 128, 64, 0, -3, 0],
			[512, 0, 128, 64, 0, -3, 0],
			[640, 0, 128, 64, 0, -3, 0],
			[768, 0, 128, 64, 0, -3, 0]
			],
			"animations":{
			"run": {"speed": 0.5, "frames": [0, 1, 2, 3]},
			"attack": {"speed": 1, "frames": [4, 5, 6]}
			}
			});
		
		pikachu = new createjs.Sprite(spritesheet, "run");
		pikachu.x = 0;
		pikachu.y = 300;
		pikachu.scaleY = pikachu.scaleX = 1;
		pikachu.framerate = 20;
		
		stage.addEventListener("stagemousedown", handleAttackStart);
		stage.addEventListener("stagemouseup", handleAttackStop);
	
	////////////////////////////////////////////////////////////////////////////////////////////////
		
		var ss = new createjs.SpriteSheet({
		"framerate":24,
		"images":[loader.getResult("enermy")],
		"frames":[
		[0, 0, 128, 128, 0, -7, -4],
		[128, 0, 128, 128, 0, -7, -4],
		[256, 0, 128, 128, 0, -7, -4],
		[384, 0, 128, 128, 0, -7, -4],
		[512, 0, 128, 128, 0, -7, -4],
		[640, 0, 128, 128, 0, -7, -4]
		],
		"animations":{"enermy": {"speed": 0.5, "frames": [0, 1, 2, 3, 4, 5]}}
		});
	
		enermy = new createjs.Sprite(ss,"enermy");
		spriteList = [];
		
		setInterval(function(){for (var i = 0; i < Math.floor((Math.random()*4)+1); i++) {
									enermy.name = "enermy" + i;
									enermy.alive = true;
									enermy.x = 1025;
									enermy.y = Math.floor((Math.random()*220)+250);;
									enermy.scaleY = enermy.scaleX = 0.7;
									enermy.framerate = 20;
									enermy.currentAnimationFrame = Math.random() * ss.getNumFrames("energy");
									stage.addChild(enermy);
									spriteList.push(enermy);
									if (i < 50 - 1) {enermy = enermy.clone(); }
								}},1500);
			
	/////////////////////////////////////////////////////////////////////////////////////////////////

		var sss = new createjs.SpriteSheet({
		"framerate":24,
		"images":[loader.getResult("bolt")],
		"frames":[
		[0, 0, 512, 512, 0, 0, 0],
		[512, 0, 512, 512, 0, 0, 0],
		[1024, 0, 512, 512, 0, 0, 0],
		[0, 512, 512, 512, 0, 0, 0],
		[512, 512, 512, 512, 0, 0, 0],
		[1024, 512, 512, 512, 0, 0, 0],
		[0, 1024, 512, 512, 0, 0, 0],
		[512, 1024, 512, 512, 0, 0, 0],
		[1024, 1024, 512, 512, 0, 0, 0],
		[0, 1536, 512, 512, 0, 0, 0]
		],
		"animations":{
		"bolt": {"speed": 0.7, "frames": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
		}
		});
		
		bolt = new createjs.Sprite(sss,"bolt");
		bolt.scaleY = bolt.scaleX = 0.3;
		bolt.framerate = 20;
	
	///////////////////////////////////////////////////////////////////////////////////////////////////
		
		var pp = new createjs.SpriteSheet({
		"framerate":24,
		"images":[loader.getResult("blood")],
		"frames":[
		[0, 0, 256, 256, 0, -173, -114],
		[256, 0, 256, 256, 0, -173, -114],
		[512, 0, 256, 256, 0, -173, -114],
		[768, 0, 256, 256, 0, -173, -114],
		[1024, 0, 256, 256, 0, -173, -114],
		[1280, 0, 256, 256, 0, -173, -114]
		],
		"animations":{"blood": {"frames": [0, 1, 2, 3, 4, 5], "speed": 1}}
		});
		
		blood = new createjs.Sprite(pp,"blood");
		blood.scaleY = blood.scaleX = 0.2;
		blood.framerate = 20;
		
	///////////////////////////////////////////////////////////////////////////////////////////////////	
	
		var ppp = new createjs.SpriteSheet({
		"framerate":24,
		"images":[loader.getResult("boom")],
		"frames":[
		[0, 0, 256, 256, 0, -30, -24],
		[256, 0, 256, 256, 0, -30, -24],
		[512, 0, 256, 256, 0, -30, -24],
		[768, 0, 256, 256, 0, -30, -24],
		[1024, 0, 256, 256, 0, -30, -24],
		[1280, 0, 256, 256, 0, -30, -24],
		[1536, 0, 256, 256, 0, -30, -24],
		[0, 256, 256, 256, 0, -30, -24],
		[256, 256, 256, 256, 0, -30, -24],
		[512, 256, 256, 256, 0, -30, -24]
		],
		"animations":{
		"boom": {"speed": 1, "frames": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
		}
		});
		
		explode = new createjs.Sprite(ppp,"boom");
		explode.scaleY = explode.scaleX = 1;
		explode.framerate = 20;
	
	///////////////////////////////////////////////////////////////////////////////////////////////////	
		
		lfHeld = rtHeld = upHeld = dnHeld = false;
		
		stage.addChild(bg,pikachu);
		stage.update();
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);

	}
	
	function handleAttackStart() {
		pikachu.gotoAndPlay("attack");
		stage.addChild(bolt);
		bolt.live = true;
		
	}
	
	function handleAttackStop() {
		pikachu.gotoAndPlay("run");
		stage.removeChild(bolt);
		bolt.live = false;
	}
	
	function tick(event) {
		
		var num = 1;
		
		for (var i = 0; i < spriteList.length; i++) {
		var item = spriteList[i];
		item.x -= num
		num = num+0.1;
		}
		
		bolt.x = pikachu.x+65;
		bolt.y = pikachu.y-20;
		explode.x = pikachu.x;
		explode.y = pikachu.y;
		
			 if(lfHeld){pikachu.x -= 5;} 
		else if(rtHeld){pikachu.x += 5;}
			 if(upHeld){pikachu.y -= 5;} 
		else if(dnHeld){pikachu.y += 5;}
		
		if(pikachu.x<=0)  {pikachu.x = 0;}
		if(pikachu.x>=950){pikachu.x = 950;}
		if(pikachu.y<=250){pikachu.y = 250;}
		if(pikachu.y>=500){pikachu.y = 500;}
		
		for(var r = 0;r<spriteList.length;r++){
		if (bolt.live == true && bolt.x < spriteList[r].x + 122 && bolt.x + 95 > spriteList[r].x && bolt.y < spriteList[r].y + 122 && bolt.y + 10 > spriteList[r].y){
				blood.x = spriteList[r].x;
				blood.y = spriteList[r].y;
				stage.addChild(blood);
				stage.removeChild(spriteList[r]);
				setTimeout(function(){stage.removeChild(blood)},400);
				spriteList[r].alive = false;}
	
				if(spriteList[r].alive==true && spriteList[r].x <= 0){
				stage.removeChild(pikachu);
				stage.addChild(explode);
				messageField.text = "You're dead: hit enter to play again";
				stage.addChild(messageField);
				}
		}
	
		stage.update(event);
	
	}
	
	function handleKeyDown(e) {
		switch(event.keyCode) {
			case KEYCODE_LEFT: lfHeld = true;
				break;
			case KEYCODE_RIGHT: rtHeld = true;			
				break;
			case KEYCODE_UP: upHeld = true;
				break;
			case KEYCODE_DOWN: dnHeld = true;
				break;
			case KEYCODE_ENTER:	init();
		}
		stage.update();
	}

	function handleKeyUp(e) {
		switch(event.keyCode) {
			case KEYCODE_LEFT:	lfHeld = false; break;
			case KEYCODE_RIGHT: rtHeld = false; break;
			case KEYCODE_UP:	upHeld = false; break;
			case KEYCODE_DOWN:  dnHeld = false; break;
		}
	}
	
	</script>
	</head>
	<body onload="init();">
	<div id="loader" class="loader"></div>
	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Pikachu</span> Adventure</h1>
		<p>Use arrow keys and mouse to attack the enemy before they can get to the other side.</p>
		</header>
		<div class="canvasHolder">
		<canvas id="testCanvas" width="1024" height="542"></canvas>
		</div>
	</body>
	</html>